<template>
  <div>
    <h1>活动评价管理</h1>
    <a-table :dataSource="reviews" rowKey="id">
      <a-table-column title="用户ID" key="userId" :customRender="renderUserId"></a-table-column>
      <a-table-column title="活动名称" key="activityName" :customRender="renderActivityName"></a-table-column>
      <a-table-column title="评价内容" dataIndex="reviewContent" key="reviewContent"></a-table-column>

      <a-table-column>
        <template v-slot="{ record }">
          <a-button @click="deleteReview(record.id)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useActivityReviewStore } from '@/stores/activityReview';
import { Button as aButton, Table as aTable, message } from 'ant-design-vue';

const activityReviewStore = useActivityReviewStore();
const reviews = ref([]);
// const userId = ref([]);

onMounted(() => {
  activityReviewStore.fetchReviews().then(data => {
    reviews.value = data;
  });
});

const deleteReview = (reviewId: number) => {
  try {
    activityReviewStore.deleteReview(reviewId);
    reviews.value = reviews.value.filter(review => review.id !== reviewId);
    message.success('评价已删除');
  } catch (error) {
    message.error('删除评价失败');
  }
};

const renderUserId = ({ text }) => text.userId.userId;
const renderActivityName = ({ text }) => text.activity.name;



</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}


</style>
